<template>
	<div class="data-upload-preview">
		<table  border="1" cellspacing="0"
			:data="data">
			<tbody >
				<tr v-for="(item,index) in data"
					v-if="item && index === 0"
					:key="index">
					<param-col v-for="(cell, j) in item"
						:key = "j"
						:range = "j"
						:cell = "cell"
						:len = "item.length"
						:column-names = "item"
						:selectedCell.sync = "selectedCell"
						@change-param="changeParam"
						@select-cell="selectCell">
					</param-col>
				</tr>
				<tr v-for="(item,index) in data"
					v-if="item && index !== 0"
					:key="index" >
					<td class="content-cell" v-for="(cell,j) in item"
					:key="j">{{ (cell !== null && typeof cell === 'object') ? cell.v : cell}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script>
	import ParamCol from './param-col'

	export default {
		name: 'data-upload-preview',
		props: {
			data: Array,
			fieldNamesAlias: Array,
			fieldTypesAlias: Array
		},
		data: function() {
			return{
				sheet: this.data,
				paramsInfo: '',
				selectedCell: null
			}
		},
		watch: {
            data() {
                this.sheet = this.data;
            }
         },
		mounted: function(){
			this.sheet = this.data;
		},
		methods: {
			changeParam(cellName, cellType, index){
				this.$emit('change-post-param', cellName, cellType, index);
			},
			selectCell(selected){
				this.selectedCell = selected;
			}
		},
		components: {
			ParamCol
		}

	}
</script>
<style lang="scss" scoped>

	.data-upload-preview {

		table {

			td {
				word-break: keep-all; /* for ie */
				white-space: nowrap;
				border-left: 1px solid #e6e9f0;
				border-top: 1px solid #e6e9f0;
				padding: 3px;
				color: #ccc;
				text-align: left;
				padding: 8px 16px;
			}
			td.content-cell {
				color: black;
				min-width: 120px;
				max-width: 260px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		}

	}
</style>
